<template>

  <div class="home">

    <Pager :menuClass="menuClass" :current="current" @input="changeCurrent" />

    <SaleList :current="current" :order="order" :saleList="saleList" @input="updateOrder" />

    <Shopcar :order="order" @input="updateOrder" />

  </div>

</template>

<script>
  import Pager from '../components/Pager.vue'
  import SaleList from '../components/SaleList.vue'
  import Shopcar from '../components/Shopcar.vue'

  export default {
    name: 'HelloWorld',
    components: {
      Pager,
      SaleList,
      Shopcar
    },
    
    data() {
      return {
        current: 1,
        menuClass: [
          { name: "纯茶" },
          { name: "奶茶" },
          { name: "咖啡" },
          { name: "果汁" },
        ],
        saleList: [
          { id: 1, name: "奶茶", price: 1, num: 0 },
          { id: 2, name: "红茶", price: 2, num: 0 },
          { id: 3, name: "绿茶", price: 3, num: 0 },
          { id: 4, name: "咖啡", price: 4, num: 0 },
          { id: 5, name: "拿铁", price: 5, num: 0 },
          { id: 6, name: "美式", price: 6, num: 0 },
          { id: 7, name: "柠檬茶", price: 6, num: 0 },
          { id: 8, name: "水果茶", price: 7, num: 0 },
          { id: 9, name: "冰淇淋", price: 8, num: 0 },
          { id: 10, name: "芝士奶茶", price: 9, num: 0 },
          { id: 11, name: "啤酒", price: 10, num: 0 },
          { id: 12, name: "可乐", price: 11, num: 0 },
          { id: 13, name: "雪碧", price: 12, num: 0 },
          { id: 14, name: "芬达", price: 13, num: 0 },
          { id: 15, name: "营养快线", price: 14, num: 0 },
          { id: 16, name: "水", price: 14, num: 0 },
        ],
        order: {
          list: [],
          price: 0,
          num: 0
        }
      }
    },
    methods: {
      changeCurrent(newCurrent) {
        this.current = newCurrent;
      },
      updateOrder(data) {
        this.order = data;
        console.log("update:order");
        this.$emit("input", this.order);

      },
      // get(){
      //   this.$axios.get('http://localhost:8080/SaleList.json').then((res) => {
      //   console.log(res);
      // }
      
    }

  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->

<style scoped>
  .home {
    display: flex;
  }
</style>